vue2.0学习笔记（五）：vue组件表单输入绑定 ：v-model

vue组件表单输入绑定 ：v-model:github链接 （demo03--持续更新中）
v-model
你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

1. 文本
   处理普通的输入框(input)

   <div>
    <input type="text" placeholder="请输入" v-model="inputText">
    第一个input输入的文本为：{{inputText}}
   </div>
   

2. 多行文本
   处理多行文本<textarea></textarea>

   <div>
       <textarea placeholder="请输入多行文本" v-model="textArea"></textarea>
       textarea输入的文本为：{{textArea}}
   </div>
   

3. 复选框
   单个复选框，绑定到布尔值：

     <div>
        单个复选框，绑定到布尔值：
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
      </div>
   

   多个复选框，绑定到同一个数组：

      <div>
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
   
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
       </div>
   
   

4. 单选按钮

   <div>
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>单选按钮: {{ picked }}</span>
   </div>
   
   

5. 选择框
   单选时：

   <div>
     <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>单选时: {{ selected }}</span>
    </div> 
   

   多选时，绑定一个数组:

      <div>
          <select v-model="selectedArr" multiple style="width: 50px;">
              <option>A</option>
              <option>B</option>
              <option>C</option>
          </select>
          <br>
          <span>多选时，绑定一个数组: {{ selectedArr }}</span>
      </div>
   

   可以使用v-for循环动态绑定数组

      <div>
      可以使用v-for循环动态绑定数组
      <select v-model="selectedArr2">
          <option v-for="option in options" 
          v-bind:value="option.value" 
          :key="option.value">
             {{ option.text }}
          </option>
      </select>
      <span>多选时，绑定一个数组: {{ selectedArr2 }}</span>
      </div>
   
   

demo03源码

<template>
    <div class="hello">
        {{msg}}
        <br>
        <div>
            <input type="text" placeholder="请输入" v-model="inputText"> 第一个input输入的文本为：{{inputText}}
        </div>
        <div>
            <textarea placeholder="请输入多行文本" v-model="textArea"></textarea> textarea输入的文本为：{{textArea}}
        </div>
        <div>
            单个复选框，绑定到布尔值：
            <input type="checkbox" id="checkbox" v-model="checked">
            <label for="checkbox">{{ checked }}</label>
        </div>
        <div>
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            <span>多选框绑定数组: {{ checkedNames }}</span>
        </div>
        <div>
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">One</label>
            <br>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for="two">Two</label>
            <br>
            <span>单选按钮: {{ picked }}</span>
        </div>
        <div>
            <select v-model="selected">
                          <option disabled value="">请选择</option>
                          <option>A</option>
                          <option>B</option>
                          <option>C</option>
                        </select>
            <span>单选时: {{ selected }}</span>
        </div>
        <div>
            <select v-model="selectedArr" multiple style="width: 50px;">
                        <option>A</option>
                        <option>B</option>
                        <option>C</option>
                    </select>
            <br>
            <span>多选时，绑定一个数组: {{ selectedArr }}</span>
        </div>
        <div>
            可以使用v-for循环动态绑定数组
            <select v-model="selectedArr2">
                <option v-for="option in options" v-bind:value="option.value" :key="option.value">
                    {{ option.text }}
                </option>
                </select>
            <span>多选时，绑定一个数组: {{ selectedArr2 }}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Demo03",
        data() {
            return {
                msg: "demo03 -- vue组件表单输入绑定 ：v-model",
                inputText: "",
                textArea: "",
                checked: false,
                checkedNames: [],
                picked: '',
                selected: '',
                selectedArr: [],
                selectedArr2:[],
                options: [{
                        text: 'One',
                        value: 'A'
                    },
                    {
                        text: 'Two',
                        value: 'B'
                    },
                    {
                        text: 'Three',
                        value: 'C'
                    }
                ]
    
            };
        },
        created() {},
        mounted: function() {
            this.$nextTick(function() {});
        },
        methods: {
            _handleClick() {
                console.log(111);
            }
        }
    };
</script>

<style scoped lang="less">
    .hello {
        height: 200px;
        margin-top: 30px;
        h2 {
            background: #dcdc3e;
        }
    }
</style>